<template>
  <div class="home">
    <el-container>
      <el-header>
        <el-row>
          <el-col :span="5">鬼灭之刃医院系统</el-col>
          <el-col :span="14"></el-col>
          <el-col :span="5">
<!--            {{$store.state.emp}}-->
            {{$store.state.emp.realname}}
            <router-link to="/home/SelfInfo">头像</router-link>
          </el-col>
        </el-row>
      </el-header>
      <el-container>

        <el-aside width="200px">
          <div class="demo-collapse">
<!--            <el-collapse  v-model="activeNames" accordion>-->
<!--              <el-collapse-item v-for="menu in menuList" :title='menu.menuName' :name="menu.id">
                <div  v-for="me in menu.childMenu" >
&lt;!&ndash;                  <el-radio-group v-model="radio1" size="large">&ndash;&gt;
&lt;!&ndash;                    <el-radio-button  @click="" :label="me.menuName" />&ndash;&gt;
&lt;!&ndash;                  </el-radio-group>&ndash;&gt;
                </div>
              </el-collapse-item>

            </el-collapse>-->
            <el-menu
                v-for="menu in menuList"
                router
                background-color="#545c64"
                class="el-menu-vertical-demo"
                default-active="2"
                text-color="#fff"
                @open="handleOpen"
                @close="handleClose"

            >
              <el-sub-menu :index="menu.id">
                <template #title>
                  <span>{{ menu.menuName }}</span>
                </template>
                <el-menu-item-group v-for="me in menu.childMenu" >
                  <el-menu-item  :index="me.url" >{{ me.menuName }}</el-menu-item>
                </el-menu-item-group>
              </el-sub-menu>
            </el-menu>
          </div>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>

</template>

<script >




export default {

  name: "home",
  data(){
    return{

         menuList:[],
    }
  },
  methods: {
    a() {
      let t = document.getElementById("test")
      t.className = "tx"
    },
    b() {
      let t = document.getElementById("test")
      t.className = "t"
    }
  },
  created() {

    let roleId=this.$store.state.emp.roleId
    this.$axios.get("http://localhost:8080/menu/list?roleId="+roleId).then((res)=>{
      console.log(this.menuList)
     this.menuList=res.data

      console.log(this.menuList)


    })
  }
}
</script>

<style scoped>
.no{
  size: auto;
}
.el-header{
  line-height: 50px;
  background-color: #337ecc;
}
.el-aside{
  height: 2000px;
  background-color: #a0cfff;
}
.el-main{
  background-color: #ecf5ff;
}
.t{
  display: none;
}
.tx{
  display: block;
}
.el-menu.el-menu-item{
  font-size: 14px;
}
</style>